<script setup lang="ts">

defineProps<{
    options: { label: string, value: string | number }[],
    modelValue: number | string | undefined
}>();

const emits = defineEmits<{
    (eventName: "update:modelValue", value: string | number): void
}>();

const changeActive = (value: string | number) => {
    emits("update:modelValue", value);
};

</script>

<template>
    <div class="radio">
        <a class="item" v-for="(item) in options" :class="{active:item.value===modelValue}" @click="changeActive(item.value)">{{ item.label }}</a>
    </div>
</template>

<style lang="scss" scoped>
.radio {
    display: flex;
    flex-wrap: wrap;

    .item {
        height: 32px;
        min-width: 60px;
        line-height: 30px;
        padding: 0 14px;
        text-align: center;
        border: 1px solid var(--cp-bg);
        background-color: var(--cp-bg);
        margin-right: 10px;
        box-sizing: border-box;
        color: var(--cp-text2);
        border-radius: 4px;
        transition: all 0.3s;

        &.active {
            border-color: var(--cp-primary);
            background-color: var(--cp-plain);
        }
    }
}
</style>
